<script lang="ts">
  import { replaceState } from '$app/navigation';
  import { onMount, tick } from 'svelte';

  import type { PageProps } from './$types';
  import { resolve } from '$app/paths';
  import { page } from '$app/state';
  import { forceTrailingSlash } from '$/lib';
  import Post from '$/lib/blog/Post.svelte';

  let { data }: PageProps = $props();

  let route = $derived(
    forceTrailingSlash(
      resolve('/blog/[id=int]-[slug]', {
        id: data.post.metadata.id.toString(),
        slug: data.post.metadata.slug,
      }),
    ),
  );

  onMount(() => {
    tick().then(() => replaceState(route, page.state));
  });
</script>

<svelte:head>
  <link rel="canonical" href={new URL(route, page.url).href} />
</svelte:head>

<Post post={data.post} />
